<template>
    <div class="livecode-create">
        <el-form ref="codeForm" :model="codeForm" :rules="codeFormRules" label-width="140px">
            <div class="livecode-create-basic livecode-create-common">
                <div class="basic-title">基础信息</div>
            </div>
            <el-form-item label="二维码名称:" prop="name">
                <el-input v-model="codeForm.name" placeholder="名称不会展示给用户，用于企业记录渠道名称或使用场景" maxlength="30" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="分组:" prop="codeGroupName">
                <div class="code-group">
                    <el-popover placement="bottom" width="400" trigger="click" ref="codeGroup" @hide="isInputShow = false">
                        <div class="code-group-content">
                            <div class="code-group-content-add" @click="isInputShow = true">
                                <div class="group-name-add">
                                    <i class="el-icon-circle-plus"></i>
                                    添加分组
                                </div>
                                <div class="group-name-input" v-show="isInputShow">
                                    <el-input
                                        type="text"
                                        placeholder="输入名称后回车"
                                        v-model="groupName"
                                        maxlength="18"
                                        show-word-limit
                                        @input="groupName = groupName.replace(/\s+/, '')"
                                        @keyup.enter.native="addGroup"
                                    />
                                </div>
                            </div>
                            <div class="group-name-list">
                                <div
                                    v-for="item in groupList"
                                    :key="item.id"
                                    class="group-name-list-item"
                                    :class="{
                                        actived: activedGroup === item.id
                                    }"
                                    @mouseenter="activedGroup = item.id"
                                    @mouseleave="activedGroup = ''"
                                    @click="onSelectedGroup(item)"
                                >
                                    <div class="group-name-list-item-name">{{ item.name }}</div>
                                    <div class="group-name-list-item-info">{{ item.count || '0' }}</div>
                                </div>
                            </div>
                        </div>
                        <el-input v-model="codeForm.codeGroupName" placeholder="请选择分组" slot="reference" readonly>
                            <div class="code-group-suffix" slot="suffix" @mouseenter="iconType = 'close'" @mouseleave="iconType = 'arrow'">
                                <i class="el-icon-arrow-down" v-if="iconType === 'arrow' || !codeForm.codeGroupName"></i>
                                <i class="el-icon-error" v-if="iconType === 'close' && codeForm.codeGroupName" @click.stop="onClearCodeGroup"></i>
                            </div>
                        </el-input>
                    </el-popover>
                </div>
            </el-form-item>
            <el-form-item label="客服人员:" prop="customerServicePersonnelStatus">
                <el-button icon="el-icon-plus" @click="addMember('all')">添加成员</el-button>
                <div>
                    <el-tag v-for="(tag, ind) in codeForm.employeeAllDayLongList" :key="tag.name" closable @close="onDelMemberTag(ind)">
                        {{ tag.employeeName }}
                    </el-tag>
                </div>
            </el-form-item>
            <el-form-item label="客户标签:" prop="customerTagStatus">
                <div class="code-common">
                    <el-switch v-model="codeForm.customerTagStatus" :active-value="1" :inactive-value="2"></el-switch>
                    <span v-if="codeForm.customerTagStatus === 1">已开启</span>
                    <span v-if="codeForm.customerTagStatus === 2">已关闭</span>
                </div>
                <div class="code-customtag" v-if="codeForm.customerTagStatus === 1">
                    <el-tag color="#ffffff" :style="{ color: '#000000' }" @click="onEditTags">+ 添加标签</el-tag>
                    <el-tag v-for="(item, index) in codeForm.customerTagList" :key="item.id" closable @close="onDelCstTags(index)">{{ item.name }}</el-tag>
                </div>
            </el-form-item>
            <el-form-item label="客户备注:" prop="customerRemarksStatus">
                <div class="code-common">
                    <el-switch v-model="codeForm.customerRemarksStatus" :active-value="1" :inactive-value="2"></el-switch>
                    <span v-if="codeForm.customerRemarksStatus === 1">已开启</span>
                    <span v-if="codeForm.customerRemarksStatus === 2">已关闭</span>
                    <span class="code-common-desc">开启后可为客户昵称加备注，方便查看客户来源</span>
                </div>
                <div class="code-remark" v-if="codeForm.customerRemarksStatus === 1">
                    <el-input placeholder="请输入客户昵称" v-model.trim="codeForm.customerRemarksMsg" maxlength="10">
                        <template slot="prepend"
                            >客户昵称-</template
                        >
                    </el-input>
                    <div class="code-remark-preview">
                        <div>预览:</div>
                        <div class="code-remark-preview-box">
                            <i class="el-icon-user-solid"></i>
                            <span> 客户昵称-{{ codeForm.customerRemarksMsg }} </span>
                        </div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="客户描述:" prop="clientDescriptionStatus">
                <div class="code-common">
                    <el-switch v-model="codeForm.clientDescriptionStatus" :active-value="1" :inactive-value="2"></el-switch>
                    <span v-if="codeForm.clientDescriptionStatus === 1">已开启</span>
                    <span v-if="codeForm.clientDescriptionStatus === 2">已关闭</span>
                    <span class="code-common-desc">开启后可为客户添加描述</span>
                </div>
                <div class="code-desc" v-if="codeForm.clientDescriptionStatus === 1">
                    <el-input type="textarea" :rows="4" placeholder="请输入客户描述内容" v-model="codeForm.clientDescriptionMsg" maxlength="150" show-word-limit></el-input>
                </div>
            </el-form-item>
            <div class="livecode-create-wel livecode-create-common">
                <div class="basic-title">欢迎语设置</div>
            </div>
            <div class="wel-tips">
                <i class="el-icon-warning"></i>
                因企业微信限制，若使用成员已在「企业微信后台」配置了欢迎语，这里的欢迎语将不会生效
            </div>
            <el-form-item label="设置欢迎语:" prop="greetingStatus">
                <el-radio-group
                    v-model="codeForm.greetingStatus"
                    @change="
                        (e) => {
                            if (e !== 1) {
                                this.codeForm.daypartingGreetingStatus = 2;
                            }
                        }
                    "
                >
                    <el-radio :label="1">渠道欢迎语</el-radio>
                    <el-radio :label="2">默认欢迎语</el-radio>
                    <el-radio :label="3">不发送欢迎语</el-radio>
                </el-radio-group>
                <div class="code-common-desc" v-if="codeForm.greetingStatus === 2">将发送成员已设置的欢迎语，若所选成员未设置欢迎语，则不会发送欢迎语</div>
            </el-form-item>
            <div class="wel-content" v-if="codeForm.greetingStatus === 1">
                <div class="wel-content-label">消息内容:</div>
                <div class="wel-content-info">
                    <message-component :messageInfo="codeForm.channelGreetingMsg" @onContentChange="onWelContentChange" contentKeys="welContent"></message-component>
                </div>
            </div>
            <!-- <el-form-item label="消息内容"
                          prop="infomationContent"
                          v-if="codeForm.greetingStatus === 1">
                <div class="wel-content-info">
                    <message-component :messageInfo="codeForm.channelGreetingMsg"
                                       @onContentChange="onWelContentChange"
                                       contentKeys="welContent"></message-component>
                </div>
            </el-form-item>-->
            <el-form-item label="分时段欢迎语:" prop="daypartingGreetingStatus" v-if="codeForm.greetingStatus === 1">
                <div class="code-common">
                    <el-switch
                        v-model="codeForm.daypartingGreetingStatus"
                        :active-value="1"
                        :inactive-value="2"
                        @change="(e) => (e === 1 ? onValidateDayparting() : (daypartingMessage = ''))"
                    ></el-switch>
                    <span v-if="codeForm.daypartingGreetingStatus === 1">已开启</span>
                    <span v-if="codeForm.daypartingGreetingStatus === 2">已关闭</span>
                </div>
                <div class="wel-dayparting" v-if="codeForm.daypartingGreetingStatus === 1">
                    <el-row class="wel-dayparting-tips wel-dayparting-common">
                        <el-col :span="4" align="right">分时段欢迎语:</el-col>
                        <el-col :span="20">
                            <p>1、员工上下班不同时间段可设置不同欢迎语；</p>
                            <p>2、分时段之外的时间将发送渠道欢迎语。</p>
                        </el-col>
                    </el-row>
                </div>
            </el-form-item>
            <div class="wel-dayparting-content" v-if="codeForm.daypartingGreetingStatus === 1">
                <div class="wel-dayparting-content-item" v-for="(item, index) in codeForm.daypartingGreetingList" :key="index">
                    <div class="wel-dayparting-content-item-label">时段{{ index + 1 }}:</div>
                    <div class="wel-dayparting-content-item-info">
                        <message-component :messageInfo="item" :contentKeys="`welContent${index}`" @onContentChange="(data) => onDaypartingChange(data, index)" isTimeShow></message-component>
                        <div class="wel-dayparting-content-item-info-del" v-if="codeForm.daypartingGreetingList && codeForm.daypartingGreetingList.length > 1">
                            <i class="el-icon-delete-solid" @click="onDelDayparting(index)"></i>
                        </div>
                    </div>
                </div>
                <div class="wel-dayparting-content-add" @click="addWelDayparting">
                    <i class="el-icon-circle-plus-outline"></i>
                    添加分时段欢迎语
                </div>
            </div>
            <el-form-item label="欢迎语屏蔽:" prop="greetingShieldStatus">
                <div class="code-common">
                    <el-switch v-model="codeForm.greetingShieldStatus" :active-value="1" :inactive-value="2"></el-switch>
                    <span v-if="codeForm.greetingShieldStatus === 1">已开启</span>
                    <span v-if="codeForm.greetingShieldStatus === 2">已关闭</span>
                    <span class="code-common-desc">开启后，客户昵称中包含设定的关键词的客户不会收到欢迎语</span>
                </div>
                <div class="wel-shield" v-if="codeForm.greetingShieldStatus === 1">
                    <el-tag color="#ffffff" :style="{ color: '#000000' }" @click="onEditShield">+ 添加屏蔽昵称</el-tag>
                    <el-input
                        v-if="isShieldInputShow"
                        maxlength="32"
                        v-model="newShieldWord"
                        ref="shieldInput"
                        @keyup.enter.native="onSubmitShield()"
                        @blur="onSubmitShield"
                        @input="newShieldWord = newShieldWord.replace(/\s+/, '')"
                        placeholder="输入后回车"
                    ></el-input>
                    <el-tag v-for="(item, index) in codeForm.greetingShieldList" :key="item.id" closable @close="onDelShieldWord(index)">{{ item }}</el-tag>
                </div>
            </el-form-item>
            <div class="livecode-create-wel livecode-create-common">
                <div class="basic-title">功能设置</div>
            </div>
            <el-form-item label="自动通过好友:" prop="autoAddFriendStatus">
                <div class="code-common">
                    <el-switch v-model="codeForm.autoAddFriendStatus" :active-value="1" :inactive-value="2"></el-switch>
                    <span v-if="codeForm.autoAddFriendStatus === 1">已开启</span>
                    <span v-if="codeForm.autoAddFriendStatus === 2">已关闭</span>
                </div>
            </el-form-item>
            <el-form-item label="二维码预览:" prop="avatarUrl">
                <div class="code-qrcode">
                    <div class="code-qrcode-preview">
                        <img class="code-qrcode-preview-outer" src="/img/qrcode_prview.png" alt />
                        <img class="code-qrcode-preview-inner" src="/img/qrcode_center.png" alt v-if="!codeForm.avatarUrl" />
                        <img class="code-qrcode-preview-inner" :src="codeForm.avatarUrl" alt v-else />
                    </div>
                    <div class="code-qrcode-upload">
                        <el-upload class="code-qrcode-upload-box" :show-file-list="false" accept=".jpg, .jpeg, .png" :auto-upload="false" action="#" :on-change="uploadChangeFile">
                            <img v-if="codeForm.avatarUrl" :src="codeForm.avatarUrl" class="avatar" alt />
                            <div class="code-qrcode-btn" v-else>
                                <i class="el-icon-plus"></i>
                                <span class="code-qrcode-btn-text">更换头像</span>
                            </div>
                        </el-upload>
                    </div>
                </div>
                <div class="code-common-desc">此二维码只是样式预览效果，请勿直接使用</div>
            </el-form-item>
            <el-form-item label prop="submit">
                <el-button type="primary" @click="onCreateCode">{{ pageType | transPageType }}渠道活码</el-button>
            </el-form-item>
        </el-form>
        <!-- 标签弹窗 -->
        <div v-show="tagsVisibleShow">
            <el-dialog
                title="选择标签"
                :close-on-click-modal="false"
                :visible.sync="tagsVisible"
                @close="
                    tagsVisible = false;
                    selectedTags = [];
                    selectedTagsKeys = [];
                "
                width="600px"
            >
                <div class="code-tags">
                    <div class="code-tags-group" v-for="item in tagList" :key="item.groupId">
                        <div class="code-tags-group-text">{{ item.groupName }}:</div>
                        <div class="code-tags-group-tags">
                            <el-tag color="#ffffff" :style="{ color: '#000000' }" @click="onEditNewTag(item.groupId)">+ 添加标签</el-tag>
                            <el-input
                                v-if="tagIndex === item.groupId"
                                maxlength="15"
                                v-model="newTagName"
                                ref="newTagInput"
                                @keyup.enter.native="onSubmitNewTag()"
                                @blur="onSubmitNewTag"
                                @input="newTagName = newTagName.replace(/\s+/, '')"
                                placeholder="输入后回车"
                            ></el-input>
                            <el-tag
                                v-for="it in item.tagNameList"
                                :key="it.id"
                                :color="selectedTagsKeys.includes(it.id) ? '#409eff' : '#ffffff'"
                                :style="selectedTagsKeys.includes(it.id) ? 'color: #ffffff' : 'color: #000000'"
                                @click="onSelectedTags(it)"
                                >{{ it.name }}</el-tag
                            >
                        </div>
                    </div>
                </div>
                <div slot="footer" class="dialog-footer">
                    <div class="code-tags-footer">
                        <div>
                            <el-button
                                type="text"
                                :loading="tagsEditLoading"
                                @click="
                                    newCstTagVisible = true;
                                    tagsVisibleShow = false;
                                "
                                >+ 添加标签组</el-button
                            >
                        </div>
                        <div>
                            <el-button
                                :loading="tagsEditLoading"
                                @click="
                                    tagsVisible = false;
                                    selectedTags = [];
                                    selectedTagsKeys = [];
                                "
                                >取消</el-button
                            >
                            <el-button type="primary" :loading="tagsEditLoading" @click="onTagsSure">确定</el-button>
                        </div>
                    </div>
                </div>
            </el-dialog>
        </div>
        <!-- 新建/修改 标签组 -->
        <el-dialog
            title="新建标签组"
            :visible.sync="newCstTagVisible"
            :close-on-click-modal="false"
            @close="
                newCstTagVisible = false;
                tagsVisibleShow = true;
                cstTags = [];
            "
            width="700px"
        >
            <div class="code-new-tag-group">
                <el-form ref="tagGroupForm" v-model="tagGroupForm">
                    <el-form-item label="标签组名称:" prop="groupName" label-width="18%">
                        <el-input
                            v-model="tagGroupForm.groupName"
                            class="madp-add"
                            placeholder="请输入标签组名称"
                            maxlength="15"
                            @input="tagGroupForm.groupName = tagGroupForm.groupName.replace(/\s+/, '')"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="标签名称:" prop="tagName" label-width="18%">
                        <el-input
                            placeholder="请输入标签名，按回车完成，多个标签用‘，’（中文逗号）隔开"
                            v-model="tagGroupForm.tagName"
                            @keyup.enter.native="handleInputConfirm('tagGroupForm', 'tagName')"
                            @input="tagGroupForm.tagName = tagGroupForm.tagName.replace(/\s+/, '')"
                        ></el-input>
                        <div v-if="cstTags && cstTags.length > 0">
                            <el-tag v-for="(tag, index) in cstTags" :key="index" closable :disable-transitions="false" @close="handleTagClose(tag)">{{ tag }}</el-tag>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button
                    :loading="newCstTagLoading"
                    @click="
                        newCstTagVisible = false;
                        tagsVisibleShow = true;
                        cstTags = [];
                    "
                    >取消</el-button
                >
                <el-button type="primary" @click="onSubmitNewTagGroup" :loading="newCstTagLoading">确定</el-button>
            </div>
        </el-dialog>
        <!-- 添加成员弹窗 开始 -->
        <div v-if="dialogShow">
            <AddMember
                ref="addMember"
                @getMemberList="getMemberList"
                @closepop="
                    () => {
                        this.addMemberDialog = false;
                        this.dialogShow = false;
                        this.listIndex = undefined;
                        this.addMemberType = undefined;
                    }
                "
                :showAddMember="addMemberDialog"
                :selectedMembers="selectedMembers"
            ></AddMember>
        </div>
    </div>
</template>

<script>
import { getTagGroupList, getAllTagByTagGroupId, createTagGroup, createTagByTagGroupId, sysFileUpload } from '@/api/channel-code/channel-code';
import { addCodeGroup, queryCodeGroupList, addChannelCode, editChannelCode } from '@/api/customers-of-drainage/customers-of-drainage';
import AddMember from '@/components/wechat/add-member';
import { timeToValues } from '@/util/date';
import MessageComponent from './components/message-component.vue';
const nowTime = new Date().getHours() + ':' + new Date().getMinutes();
export default {
    components: {
        AddMember,
        MessageComponent
    },
    props: {
        detailInfo: {
            type: Object,
            default: () => ({})
        },
        pageType: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            codeForm: {
                name: '', // 二维码名称
                codeGroupName: '', // 分组名称
                groupId: '', // 分组id
                customerServicePersonnelStatus: 1, // 客服人员在线时间 '1'--全天在线；'2'--自动上下线
                employeeAllDayLongList: [], // 客服人员全天在线时选择成员
                employeeTopBottomLineList: [
                    // 客服人员自动上下线时的周期及对应成员时间信息
                    {
                        employeeIdList: [], // 对应周期的客服人员
                        weekList: [1, 2, 3, 4, 5, 6, 7], // 工作日
                        employeeTopBottomLineStartTime: null, // 开始时间
                        employeeTopBottomLineEndTime: null // 结束时间
                    }
                ],
                employeeAddUpperLimitStatus: 2, // 是否设置员工添加上限
                employeeAddUpperLimitList: [], // 添加上限的员工信息
                employeeOfflineStatus: 2, // 允许员工上下线
                customerTagStatus: 2, // 是否设置客户标签
                customerTagList: [], // 设置的客户标签
                customerRemarksStatus: 2, // 是否设置客户备注
                customerRemarksMsg: '', // 客户备注(昵称)
                clientDescriptionStatus: 2, // 是否开启客户描述
                clientDescriptionMsg: '', // 客户描述内容
                greetingStatus: 1, // 设置欢迎语 '1'--渠道欢迎语；'2'--默认欢迎语；'3'--不发送欢迎语
                channelGreetingMsg: {
                    // 欢迎语内容
                    words: '', // 消息内容
                    annexList: {} // 附件
                },
                daypartingGreetingStatus: 2, // 是否开启分时段欢迎语
                daypartingGreetingList: [
                    // 分时段欢迎语开启时的各时段
                    {
                        words: '', // 消息内容
                        annexList: {}, // 附件
                        weekList: [1, 2, 3, 4, 5, 6, 7], // 发送工作日
                        daypartingGreetingStartTime: null, // 发送开始时间点
                        daypartingGreetingEndTime: null // 发送结束时间点
                    }
                ],
                greetingShieldStatus: 2, // 是否开启欢迎语屏蔽
                greetingShieldList: [], // 屏蔽的相关词汇
                autoAddFriendStatus: 2, // 是否自动通过好友
                autoAddFriendTimeStatus: 1, // 自动通过好友的开启时间  '1'--全天开启；'2'--选择时间段
                autoAddFriendMsg: {
                    // 自动通过好友选择时间段
                    autoAddFriendEndTime: null, // autoAddFriendTimeStatus为'2'时，开启的开始时间点
                    autoAddFriendStartTime: null // autoAddFriendTimeStatus为'2'时，开启的结束时间点
                },
                avatarUrl: '' // 二维码地址
            },
            codeFormRules: {
                name: [
                    {
                        required: true,
                        message: '请输入二维码名称',
                        trigger: 'change'
                    }
                ],
                codeGroupName: [
                    {
                        required: true,
                        message: '请选择分组',
                        trigger: 'change'
                    }
                ],
                customerServicePersonnelStatus: [
                    {
                        required: true,
                        message: '请选择客服人员',
                        trigger: 'change'
                    }
                ]
            },
            iconType: 'arrow',
            groupList: [],
            staffTableList: [],
            staffLimitValue: 100,
            isInputShow: false,
            groupName: '',
            activedGroup: '',
            addMemberDialog: false,
            dialogShow: false,
            selectedMembers: [],
            dayOptions: [
                { label: '周一', value: 1 },
                { label: '周二', value: 2 },
                { label: '周三', value: 3 },
                { label: '周四', value: 4 },
                { label: '周五', value: 5 },
                { label: '周六', value: 6 },
                { label: '周日', value: 7 }
            ],
            listIndex: undefined,
            tagsVisible: false,
            tagsVisibleShow: false,
            tagsEditLoading: false,
            tagList: [],
            tagIndex: undefined,
            newTagName: '',
            selectedTags: [],
            selectedTagsKeys: [],
            limitSelectedKeys: [],
            isLimitHandleShow: false,
            newCstTagVisible: false,
            newCstTagLoading: false,
            tagGroupForm: {
                groupName: '',
                tagName: ''
            },
            cstTags: [],
            searchStaffName: '',
            isShieldInputShow: false,
            newShieldWord: ''
        };
    },
    created() {
        if (this.pageType) {
            this.codeForm = JSON.parse(JSON.stringify(this.detailInfo));
            this.staffTableList = JSON.parse(JSON.stringify(this.detailInfo.employeeAddUpperLimitList));
            if (this.detailInfo.employeeAddUpperLimitList && this.detailInfo.employeeAddUpperLimitList.length) {
                this.isLimitHandleShow = true;
            }
        }
    },
    mounted() {
        this.getGroupList();
        this.getTagList();
    },
    filters: {
        transWeekDay(value) {
            switch (value) {
                case 1:
                    return '周一';
                case 2:
                    return '周二';
                case 3:
                    return '周三';
                case 4:
                    return '周四';
                case 5:
                    return '周五';
                case 6:
                    return '周六';
                case 7:
                    return '周日';
                default:
                    break;
            }
        },
        transPageType(val) {
            switch (val) {
                case 'edit':
                    return '修改';
                case 'copy':
                    return '复制';
                case 'batch':
                    return '批量创建';
                default:
                    return '新建';
            }
        }
    },
    methods: {
        getGroupList() {
            queryCodeGroupList().then((res) => {
                if (res.data.code === 0) {
                    const list = res.data.data || [];
                    this.groupList = list.filter((item) => item.id !== 0);
                }
            });
        },
        // 新建分组
        addGroup(e) {
            if (!e.target.value) return;
            const params = {
                nameList: [e.target.value]
            };
            addCodeGroup(params).then((res) => {
                if (res.data.code === 0) {
                    this.$message.success('新增分组成功');
                    this.isInputShow = false;
                    this.name = '';
                    this.getGroupList();
                }
            });
        },
        // 选中分组
        onSelectedGroup(records) {
            this.codeForm.codeGroupName = records.name;
            this.codeForm.groupId = records.id;
            if (this.$refs.codeGroup) {
                this.$refs.codeGroup.doClose();
            }
        },
        // 清除选中分组
        onClearCodeGroup(e) {
            this.codeForm.codeGroupName = '';
            this.codeForm.groupId = '';
        },
        // 打开人员选择组件，并传入已选人员
        addMember(type, records, index) {
            // 客服人员全天在线
            if (type === 'all') {
                this.selectedMembers = this.codeForm.employeeAllDayLongList;
            } else if (type === 'spare') {
                // 备选成员
                // this.selectedMembers = this.codeForm.standbyEmployeeList;
            } else {
                // 客服人员自动上下线
                this.selectedMembers = records.employeeIdList;
                this.listIndex = index;
            }
            this.addMemberType = type;
            this.addMemberDialog = true;
            this.dialogShow = true;
        },
        // 人员选择组件确认选择
        getMemberList(data) {
            if (this.addMemberType === 'all') {
                // 客服人员全天在线
                this.codeForm.employeeAllDayLongList = data;
                this.changeStaffLimitList('all');
            } else if (this.addMemberType === 'spare') {
                // 备选成员
                // this.codeForm.standbyEmployeeList = data;
            } else {
                // 客服人员自动上下线
                this.$set(this.codeForm.employeeTopBottomLineList[this.listIndex], 'employeeIdList', data);
                this.changeStaffLimitList('list');
                this.onValidateTime();
            }
            this.addMemberDialog = false;
            this.dialogShow = false;
            this.listIndex = undefined;
            this.addMemberType = undefined;
        },
        // 客服人员自动上下线中工作周期变更
        onWorkDayChange(keys, index) {
            this.$set(this.codeForm.employeeTopBottomLineList[index], 'weekList', keys);
            this.onValidateTime();
        },
        //  客服人员自动上下线时间段变更
        onTimeRangeChange() {
            this.onValidateTime();
        },
        // 校验客服人员是否存在时间段冲突
        onValidateTime() {
            this.$nextTick(() => {
                let reEmploy = '';
                let reWorkDay = '';
                let cstMessage = '';
                let isRepeat = false;
                console.log('this.codeForm.employeeTopBottomLineList', this.codeForm.employeeTopBottomLineList);
                for (let i = 0; i < this.codeForm.employeeTopBottomLineList.length; i++) {
                    if (isRepeat) {
                        break;
                    }
                    if (!this.codeForm.employeeTopBottomLineList[i].employeeIdList || this.codeForm.employeeTopBottomLineList[i].employeeIdList.length === 0) {
                        cstMessage = `请在【工作周期${i + 1}】选择客服人员`;
                        break;
                    }
                    if (!this.codeForm.employeeTopBottomLineList[i].weekList || this.codeForm.employeeTopBottomLineList[i].weekList.length === 0) {
                        cstMessage = `请在【工作周期${i + 1}】选择工作日`;
                        break;
                    }
                    if (!this.codeForm.employeeTopBottomLineList[i].employeeTopBottomLineStartTime || !this.codeForm.employeeTopBottomLineList[i].employeeTopBottomLineEndTime) {
                        cstMessage = `请在【工作周期${i + 1}】选择上线时间`;
                        break;
                    } else {
                        const startTimeL = timeToValues(this.codeForm.employeeTopBottomLineList[i].employeeTopBottomLineStartTime);
                        const endTimeR = timeToValues(this.codeForm.employeeTopBottomLineList[i].employeeTopBottomLineEndTime);
                        if (startTimeL >= endTimeR) {
                            cstMessage = `【工作周期${i + 1}】的开始时间和结束时间存在冲突`;
                            break;
                        }
                    }
                    for (let j = 1; j < this.codeForm.employeeTopBottomLineList.length; j++) {
                        if (i === j) {
                            continue;
                        }
                        if (
                            !this.codeForm.employeeTopBottomLineList[j].employeeIdList ||
                            this.codeForm.employeeTopBottomLineList[j].employeeIdList.length === 0 ||
                            !this.codeForm.employeeTopBottomLineList[j].weekList ||
                            this.codeForm.employeeTopBottomLineList[j].weekList.length === 0 ||
                            !this.codeForm.employeeTopBottomLineList[j].employeeTopBottomLineStartTime ||
                            !this.codeForm.employeeTopBottomLineList[j].employeeTopBottomLineEndTime
                        ) {
                            break;
                        }
                        const employeesJ = this.codeForm.employeeTopBottomLineList[j].employeeIdList.map((item) => item.employeeId);
                        const employeesI = this.codeForm.employeeTopBottomLineList[i].employeeIdList.findIndex((item) => employeesJ.includes(item.employeeId));
                        if (employeesI > -1) {
                            reEmploy = this.codeForm.employeeTopBottomLineList[i].employeeIdList[employeesI].employeeName;
                            const workDayInd = this.codeForm.employeeTopBottomLineList[i].weekList.findIndex((item) => this.codeForm.employeeTopBottomLineList[j].weekList.includes(item));
                            if (workDayInd > -1) {
                                reWorkDay = this.$options.filters['transWeekDay'](this.codeForm.employeeTopBottomLineList[i].weekList[workDayInd]);
                                const startTime = timeToValues(this.codeForm.employeeTopBottomLineList[i].employeeTopBottomLineStartTime);
                                const endTime = timeToValues(this.codeForm.employeeTopBottomLineList[i].employeeTopBottomLineEndTime);
                                const startTimeOption = timeToValues(this.codeForm.employeeTopBottomLineList[j].employeeTopBottomLineStartTime);
                                const endTimeOption = timeToValues(this.codeForm.employeeTopBottomLineList[j].employeeTopBottomLineEndTime);

                                if (startTime <= startTimeOption && endTime >= endTimeOption) {
                                    isRepeat = true;
                                    cstMessage = `员工【${reEmploy}】在【工作周期${i + 1}】和【工作周期${j + 1}】的【${reWorkDay}】有时间冲突`;
                                    this.$message.error(cstMessage);
                                }
                            }
                        }
                    }
                }
                this.cstMessage = cstMessage;
            });
        },
        // 客服人员自动上下线新增时间段
        addNewEmployList() {
            this.codeForm.employeeTopBottomLineList.push({
                employeeIdList: [],
                weekList: [1, 2, 3, 4, 5, 6, 7],
                employeeTopBottomLineStartTime: null,
                employeeTopBottomLineEndTime: null
            });
            this.onValidateTime();
        },
        // 获取员工上限可操作的员工，基于客服人员
        changeStaffLimitList(type) {
            let staffObj = {};
            this.codeForm.employeeAddUpperLimitList.forEach((item) => {
                staffObj[item.employeeId] = item;
            });
            if (type === 'all') {
                const staffList = this.codeForm.employeeAllDayLongList.map((item) => ({
                    ...item,
                    maxNum: staffObj[item.employeeId] && staffObj[item.employeeId].maxNum ? staffObj[item.employeeId].maxNum : 100
                }));
                if (staffList.length === 0 && this.codeForm.employeeAddUpperLimitStatus === 1) {
                    this.$message.error('请选择客服人员！');
                    this.codeForm.employeeAddUpperLimitStatus = 2;
                } else {
                    this.isLimitHandleShow = true;
                }
                this.codeForm.employeeAddUpperLimitList = staffList;
                this.staffTableList = staffList;
            } else {
                let staffList = [];
                this.codeForm.employeeTopBottomLineList.forEach((item) => {
                    staffList.push(...item.employeeIdList);
                });
                const res = new Map();
                staffList = staffList.filter((item) => !res.has(item.employeeId) && res.set(item.employeeId, 1));
                const newStaffList = staffList.map((item) => ({
                    ...item,
                    maxNum: staffObj[item.employeeId] && staffObj[item.employeeId].maxNum ? staffObj[item.employeeId].maxNum : 100
                }));
                if (newStaffList.length === 0 && this.codeForm.employeeAddUpperLimitStatus === 1) {
                    this.$message.error('请选择客服人员！');
                    this.codeForm.employeeAddUpperLimitStatus = 2;
                } else {
                    this.isLimitHandleShow = true;
                }
                this.codeForm.employeeAddUpperLimitList = newStaffList;
                this.staffTableList = newStaffList;
            }
        },
        // 员工添加上下限筛选
        onSearchStaff(e) {
            this.searchStaffName = this.searchStaffName.replace(/\s+/, '');
            if (!this.searchStaffName) {
                this.staffTableList = this.codeForm.employeeAddUpperLimitList;
            } else {
                this.staffTableList = this.codeForm.employeeAddUpperLimitList.filter((item) => item.employeeName.includes(this.searchStaffName));
            }
        },
        // 员工添加上限表格勾选
        handleSelectChange(e) {
            this.limitSelectedKeys = e && e.map((item) => item.employeeId);
        },
        // 上限值变更
        onLimitChange(value, id) {
            this.codeForm.employeeAddUpperLimitList = this.codeForm.employeeAddUpperLimitList.map((item) => ({
                ...item,
                maxNum: item.employeeId === id ? value : item.maxNum
            }));
        },
        // 批量上限变更
        onSubmitCommonLimit(type) {
            if (type) {
                this.staffTableList = this.staffTableList.map((item) => ({
                    ...item,
                    maxNum: this.limitSelectedKeys.includes(item.employeeId) ? this.staffLimitValue : item.maxNum
                }));
                this.codeForm.employeeAddUpperLimitList = this.codeForm.employeeAddUpperLimitList.map((item) => ({
                    ...item,
                    maxNum: this.limitSelectedKeys.includes(item.employeeId) ? this.staffLimitValue : item.maxNum
                }));
            }
            this.staffLimitValue = 100;
            if (this.$refs.staffLimitSet) {
                this.$refs.staffLimitSet.doClose();
            }
        },
        // 获取客户标签组及标签
        getTagList() {
            getTagGroupList()
                .then((res) => {
                    if (res.data.code === 0) {
                        this.tagList = res.data.data;
                    }
                })
                .catch(() => {});
        },
        // 打开客户标签选择弹框，若已有选中标签，将选中标签赋值给弹框中对应字段，以便回显及操作
        onEditTags() {
            if (this.codeForm.customerTagList && this.codeForm.customerTagList.length > 0) {
                this.selectedTags = JSON.parse(JSON.stringify(this.codeForm.customerTagList));
                this.selectedTagsKeys = this.codeForm.customerTagList.map((item) => item.id);
            }
            this.tagsVisible = true;
            this.tagsVisibleShow = true;
        },
        // 客户标签弹框中标签的选中及取消
        onSelectedTags(records) {
            const index = this.selectedTagsKeys.findIndex((item) => item === records.id);
            if (index > -1) {
                this.selectedTagsKeys.splice(index, 1);
                this.selectedTags.splice(index, 1);
            } else {
                this.selectedTags.push(records);
                this.selectedTagsKeys.push(records.id);
            }
        },
        // 客户标签弹框中确认按钮操作，并清空弹框中的操作痕迹
        onTagsSure() {
            this.codeForm.customerTagList = JSON.parse(JSON.stringify(this.selectedTags));
            this.$nextTick(() => {
                this.selectedTags = [];
                this.selectedTagsKeys = [];
                this.tagsVisible = false;
            });
        },
        // 删除对应点击的客户标签
        onDelCstTags(index) {
            this.codeForm.customerTagList.splice(index, 1);
        },
        // 添加标签
        onEditNewTag(groupId) {
            this.tagIndex = groupId;
            this.$nextTick(() => {
                if (this.$refs.newTagInput) {
                    this.$refs.newTagInput[0].focus();
                }
            });
        },
        // 新建标签
        onSubmitNewTag(e) {
            if (this.newTagName) {
                createTagByTagGroupId({
                    groupId: this.tagIndex,
                    tagNameList: [this.newTagName]
                })
                    .then((res) => {
                        if (res.data.code === 0) {
                            this.getTagList();
                        }
                    })
                    .then(() => {
                        this.newCstTagVisible = false;
                        this.tagsVisibleShow = true;
                        this.newTagName = '';
                        this.tagIndex = undefined;
                    });
            } else {
                if (e) {
                    this.newCstTagVisible = false;
                    this.tagsVisibleShow = true;
                    this.newTagName = '';
                    this.tagIndex = undefined;
                }
            }
        },
        // 新建标签组中，删除已输入的标签
        handleTagClose(tag) {
            this.cstTags.splice(this.cstTags.indexOf(tag), 1);
        },
        // 新建标签组中，输入框回车生成el-tag
        handleInputConfirm(formName, key) {
            let _this = this;
            let inputValue = _this[formName][key].replaceAll('，', ',').split(',');
            inputValue.map(function(currentValue, index) {
                if (currentValue) {
                    _this.cstTags.push(currentValue);
                }
            });
            _this.inputVisible = true;
            _this[formName][key] = ''; //回车完成，清空输入框
        },
        // 添加标签分组
        onSubmitNewTagGroup() {
            if (!this.tagGroupForm.groupName) {
                this.$message.error('请输入标签组名称');
                return;
            }
            this.newCstTagLoading = true;
            const tagNameList = [...new Set((this.tagGroupForm.tagName ? this.tagGroupForm.tagName.split('，') : []).concat(this.cstTags))];
            if (!tagNameList || tagNameList.length === 0) {
                this.$message.error('请输入标签名称');
                return;
            }
            let flag = false;
            tagNameList.map((item, index) => {
                if (item.length > 15) {
                    this.$message.error('标签名称最多15个字');
                    falg = true;
                }
            });
            if (flag) {
                return;
            }
            createTagGroup({
                groupName: this.tagGroupForm.groupName,
                tagNameList
            })
                .then((res) => {
                    if (res.data.code === 0) {
                        this.getTagList();
                    }
                })
                .then(() => {
                    this.tagGroupForm = {};
                    this.newCstTagVisible = false;
                    this.tagsVisibleShow = true;
                    this.newCstTagLoading = false;
                })
                .catch(() => {
                    this.newCstTagLoading = false;
                });
        },
        // 消息内容组件回调，内容文本或附件
        onWelContentChange(data) {
            this.codeForm.channelGreetingMsg = {
                ...this.codeForm.channelGreetingMsg,
                ...data
            };
        },
        // 分时段欢迎语时间变更
        onDaypartingChange(data, index) {
            this.codeForm.daypartingGreetingList[index] = {
                ...this.codeForm.daypartingGreetingList[index],
                ...data
            };
            this.onValidateDayparting();
        },
        // 分时段各时间段校验
        onValidateDayparting() {
            this.$nextTick(() => {
                let reDayparting = '';
                let daypartingMessage = '';
                let isDaypartingRepeat = false;
                for (let i = 0; i < this.codeForm.daypartingGreetingList.length; i++) {
                    if (isDaypartingRepeat) {
                        break;
                    }
                    if (!this.codeForm.daypartingGreetingList[i].words || !this.codeForm.daypartingGreetingList[i].words.trim()) {
                        daypartingMessage = `请在分时段欢迎语时间段${i + 1}输入消息内容`;
                        break;
                    }
                    if (!this.codeForm.daypartingGreetingList[i].weekList || this.codeForm.daypartingGreetingList[i].weekList.length === 0) {
                        daypartingMessage = `请在分时段欢迎语时间段${i + 1}选择发送日期`;
                        break;
                    }
                    if (!this.codeForm.daypartingGreetingList[i].daypartingGreetingStartTime || !this.codeForm.daypartingGreetingList[i].daypartingGreetingEndTime) {
                        daypartingMessage = `请在分时段欢迎语时间段${i + 1}选择发送时段`;
                        break;
                    }
                    const startTimeL = timeToValues(this.codeForm.daypartingGreetingList[i].daypartingGreetingStartTime);
                    const endTimeR = timeToValues(this.codeForm.daypartingGreetingList[i].daypartingGreetingEndTime);
                    if (startTimeL >= endTimeR) {
                        daypartingMessage = `分时段欢迎语【时间段${i + 1}】的开始时间和结束时间存在冲突`;
                        break;
                    }
                    for (let j = 1; j < this.codeForm.daypartingGreetingList.length; j++) {
                        if (i === j) {
                            continue;
                        }
                        if (
                            !this.codeForm.daypartingGreetingList[j].words ||
                            !this.codeForm.daypartingGreetingList[j].words.trim() ||
                            !this.codeForm.daypartingGreetingList[j].weekList ||
                            this.codeForm.daypartingGreetingList[j].weekList.length === 0 ||
                            !this.codeForm.daypartingGreetingList[j].daypartingGreetingStartTime ||
                            !this.codeForm.daypartingGreetingList[j].daypartingGreetingEndTime
                        ) {
                            break;
                        }
                        const workDayInd = this.codeForm.daypartingGreetingList[i].weekList.findIndex((item) => this.codeForm.daypartingGreetingList[j].weekList.includes(item));
                        if (workDayInd > -1) {
                            reDayparting = this.$options.filters['transWeekDay'](this.codeForm.daypartingGreetingList[i].weekList[workDayInd]);
                            const startTime = timeToValues(this.codeForm.daypartingGreetingList[i].daypartingGreetingStartTime);
                            const endTime = timeToValues(this.codeForm.daypartingGreetingList[i].daypartingGreetingEndTime);
                            const startTimeOption = timeToValues(this.codeForm.daypartingGreetingList[j].daypartingGreetingStartTime);
                            const endTimeOption = timeToValues(this.codeForm.daypartingGreetingList[j].daypartingGreetingEndTime);

                            if (startTime <= startTimeOption && endTime >= endTimeOption) {
                                isDaypartingRepeat = true;
                                daypartingMessage = `分时段欢迎语在【时间段${i + 1}】和【时间段${j + 1}】的${reDayparting}有时间冲突`;
                                this.$message.error(daypartingMessage);
                            }
                        }
                    }
                }
                this.daypartingMessage = daypartingMessage;
            });
        },
        // 点击标签删除人员，客服人员变更重新获取添加上限可操作员工
        onDelMemberTag(index) {
            // 客服人员全天在线
            this.codeForm.employeeAllDayLongList.splice(index, 1);
            this.changeStaffLimitList('all');
        },
        // 新增欢迎语时间段
        addWelDayparting() {
            this.codeForm.daypartingGreetingList.push({
                words: '',
                annexList: [],
                weekList: [1, 2, 3, 4, 5, 6, 7],
                daypartingGreetingStartTime: nowTime,
                daypartingGreetingEndTime: nowTime
            });
            this.onValidateDayparting();
        },
        // 删除欢迎语时间段
        onDelDayparting(index) {
            this.codeForm.daypartingGreetingList.splice(index, 1);
        },
        // 打开屏蔽词输入框
        onEditShield() {
            this.$nextTick(() => {
                this.isShieldInputShow = true;
                if (this.$refs.shieldInput) {
                    this.$refs.shieldInput[0].focus();
                }
            });
        },
        // 添加屏蔽词
        onSubmitShield(e) {
            if (this.newShieldWord) {
                this.codeForm.greetingShieldList.push(this.newShieldWord);
                this.isShieldInputShow = false;
            } else {
                if (e) {
                    this.isShieldInputShow = false;
                }
            }
            this.newShieldWord = '';
        },
        // 移除屏蔽词
        onDelShieldWord(index) {
            this.codeForm.greetingShieldList.splice(index, 1);
        },
        // 更改上传路径
        uploadChangeFile(file) {
            this.sysFileUploadFn(file);
        },
        // 上传头像
        sysFileUploadFn(file) {
            let fd = new FormData();
            fd.append('file', file.raw);
            sysFileUpload(fd).then((res) => {
                if (res.data.code === 0) {
                    let fileMsg = res.data.data;
                    this.codeForm.avatarUrl = fileMsg.url;
                }
            });
        },
        // 校验并提交渠道活码的信息
        onCreateCode() {
            if (!this.codeForm.name) {
                this.$message.error('请输入二维码名称');
            } else if (!this.codeForm.groupId) {
                this.$message.error('请选择分组');
            } else if (this.codeForm.customerServicePersonnelStatus === 1 && (!this.codeForm.employeeAllDayLongList || this.codeForm.employeeAllDayLongList.length === 0)) {
                this.$message.error('请选择客服人员');
            } else if (this.cstMessage) {
                this.$message.error(this.cstMessage);
            } else if (this.codeForm.customerTagStatus === 1 && (!this.codeForm.customerTagList || this.codeForm.customerTagList.length === 0)) {
                this.$message.error('客户标签已开启，请选择客户标签');
            } else if (this.codeForm.customerRemarksStatus === 1 && !this.codeForm.customerRemarksMsg) {
                this.$message.error('客户备注已开启，请选择客户备注昵称');
            } else if (this.codeForm.clientDescriptionStatus === 1 && !this.codeForm.clientDescriptionMsg) {
                this.$message.error('客户描述已开启，请选择客户描述');
            } else if (this.codeForm.greetingStatus === 1 && !this.codeForm.channelGreetingMsg.words) {
                this.$message.error('欢迎语设为渠道欢迎语，请输入欢迎语消息内容');
            } else if (this.daypartingMessage) {
                this.$message.error(this.daypartingMessage);
            } else if (this.codeForm.greetingShieldStatus === 1 && (!this.codeForm.greetingShieldList || this.codeForm.greetingShieldList.length === 0)) {
                this.$message.error('欢迎语屏蔽已开启，请输入屏蔽昵称');
            } else if (!this.codeForm.avatarUrl) {
                this.$message.error('请上传二维码');
            } else {
                // 客户标签处理
                const customerTagList = [];
                const tagGroupId = [];
                const selectedTagIds = this.codeForm.customerTagList.map((item) => item.id);
                this.tagList.forEach((item) => {
                    item.tagNameList.forEach((it) => {
                        if (selectedTagIds.includes(it.id)) {
                            const index = tagGroupId.findIndex((id) => id === item.groupId);
                            if (index > -1) {
                                customerTagList[index].tagNameList.push(JSON.parse(JSON.stringify(it)));
                            } else {
                                tagGroupId.push(item.groupId);
                                customerTagList.push({
                                    ...item,
                                    tagNameList: [JSON.parse(JSON.stringify(it))]
                                });
                            }
                        }
                    });
                });
                // 员工添加上限处理
                const employeeAddUpperLimitList = this.codeForm.employeeAddUpperLimitList.map((item) => ({
                    employeeId: item.employeeId,
                    maxNum: item.maxNum
                }));
                // 备选员工处理
                // const standbyEmployeeList = this.codeForm.standbyEmployeeList.map((item) => item.employeeId);
                // 欢迎语处理
                const channelGreetingMsg = {
                    ...this.codeForm.channelGreetingMsg,
                    mediumId: this.codeForm.channelGreetingMsg.annexList.mediumId
                };
                delete channelGreetingMsg.annexList;
                // 分时段欢迎语处理
                const daypartingGreetingList = this.codeForm.daypartingGreetingList.map((item) => {
                    const obj = {
                        ...item,
                        mediumId: item.annexList.mediumId
                    };
                    delete obj.annexList;
                    return obj;
                });
                // 处理全天在线备选员工
                const employeeAllDayLongList = this.codeForm.employeeAllDayLongList.map((item) => {
                    const obj = {
                        id: item.employeeId,
                        status: 1
                    };
                    return obj;
                });
                // 处理自动上下线员工
                const employeeTopBottomLineList = this.codeForm.employeeTopBottomLineList.map((item) => ({
                    ...item,
                    employeeIdList: item.employeeIdList.map((it) => ({
                        id: it.employeeId,
                        status: 1
                    }))
                }));
                const params = {
                    ...JSON.parse(JSON.stringify(this.codeForm)),
                    customerTagList,
                    employeeAddUpperLimitList,
                    // standbyEmployeeList,
                    channelGreetingMsg,
                    daypartingGreetingList,
                    employeeAllDayLongList,
                    employeeTopBottomLineList
                };
                delete params.codeGroupName;
                if (this.pageType === 'edit') {
                    editChannelCode(params).then((res) => {
                        if (res.data.code === 0) {
                            this.$message.success('修改成功');
                            this.$emit('goBack', true);
                        }
                    });
                    return;
                } else {
                    delete params.id;
                    addChannelCode(params).then((res) => {
                        if (res.data.code === 0) {
                            this.$message.success(`${this.pageType ? '复制' : '新建'}成功`);
                            this.$emit('goBack', true);
                        }
                    });
                }
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.livecode-create {
    /deep/ .el-input {
        width: 400px;
    }
    .basic-container {
        padding-top: 30px;
    }
    &-common {
        padding: 0 16px;
        .basic-title {
            padding-bottom: 3px;
            margin-bottom: 20px;
            line-height: 32px;
            font-size: 15px;
            border-bottom: 1px solid #e6e6e6;
        }
    }
}
.code-group {
    /deep/ .el-input {
        input {
            cursor: pointer;
        }
    }
    &-content {
        &-add {
            .group-name-add {
                line-height: 50px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #e6e6e6;
                cursor: pointer;
                .el-icon-circle-plus {
                    padding: 0 10px 0 24px;
                    color: #1890ff;
                }
            }
            .group-name-input {
                padding: 16px 19px 16px 24px;
            }
        }
        .group-name-list {
            &-item {
                padding: 0 24px;
                line-height: 40px;
                display: flex;
                justify-content: space-between;
                cursor: pointer;
                &:last-child {
                    border: none;
                }
                &.actived,
                &.selected {
                    background-color: #effaff;
                    color: rgba(0, 0, 0, 0.65);
                }
                &.selected {
                    border-left: 3px solid #1890ff;
                    padding-left: 21px;
                }
                &-name {
                    // width: 120px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                &-info {
                    color: rgba($color: #000000, $alpha: 0.25);
                }
            }
        }
    }
}
.code-employ {
    &-add {
        .el-button {
            margin-right: 10px;
        }
    }
    &-tags {
        max-height: 300px;
        overflow: auto;
    }
}
.code-employees {
    &-common {
        width: 620px;
        padding: 16px 0;
        box-sizing: border-box;
        border-radius: 3px;
    }
    &-tips {
        border: 1px solid #acd7ff;
        background-color: #f7fcff;
        font-size: 12px;
        line-height: 20px;
        .el-col {
            margin-bottom: 0;
        }
    }
    &-item {
        margin-top: 10px;
        border: 1px solid #eee;
        background-color: #fbfbfb;
        position: relative;
        &-del {
            font-size: 18px;
            position: absolute;
            right: -30px;
            bottom: -10px;
            cursor: pointer;
        }
        .el-col {
            margin-bottom: 5px;
        }
        /deep/ .el-select {
            width: 100%;
            .el-input {
                width: 100%;
            }
        }
        /deep/ .el-date-editor {
            width: 180px !important;
        }
        .space-place {
            padding: 0 5px;
        }
    }
    &-newline {
        width: 150px;
        margin-top: 10px;
        cursor: pointer;
        color: #1890ff;
    }
}
.code-common {
    display: flex;
    align-items: center;
    span {
        margin-left: 5px;
        margin-right: 12px;
    }
}

.code-common-desc {
    color: rgba($color: #000000, $alpha: 0.45);
}
.code-limit {
    width: 600px;
    &-tips {
        line-height: 50px;
        padding: 0 16px;
        background-color: #f7fcff;
        border: 1px solid #acd7ff;
        border-radius: 3px;
        box-sizing: border-box;
        font-size: 12px;
    }
    &-handle {
        margin: 16px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    &-table {
        margin-top: 10px;
        /deep/ .el-input {
            width: auto;
        }
    }
}
.code-spare {
    flex-direction: column;
    align-items: flex-start;
}
.code-customtag {
    .el-tag {
        cursor: pointer;
        user-select: none;
    }
}
.code-remark {
    &-preview {
        margin-top: 20px;
        display: flex;
        align-items: flex-start;
        &-box {
            line-height: 50px;
            border: 1px solid #acd7ff;
            padding: 0 16px;
            border-radius: 3px;
            display: flex;
            align-items: center;
            .el-icon-user-solid {
                width: 32px;
                height: 32px;
                font-size: 20px;
                color: #fff;
                background-color: #1890ff;
                border-radius: 2px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 5px;
            }
        }
    }
}
.code-desc {
    margin-top: 10px;
    /deep/ .el-textarea {
        width: 620px;
    }
}
.code-tags {
    &-group {
        margin-top: 10px;
        &-text {
            color: #999999;
        }
        &-tags {
            .el-button {
                margin-right: 5px;
            }
            .el-tag {
                cursor: pointer;
                user-select: none;
            }
            /deep/ .el-input {
                width: 100px;
                margin-right: 5px;
                input {
                    height: 28px;
                    line-height: 28px;
                }
            }
        }
    }
}
.code-tags-footer {
    display: flex;
    justify-content: space-between;
}
.code-new-tag-group {
    /deep/ .el-input {
        width: 500px;
    }
}
.limit-common {
    &-set {
        display: flex;
        align-items: center;
    }
    &-btn {
        margin-top: 16px;
        display: flex;
        justify-content: flex-end;
    }
}
.el-tag {
    margin: 5px 5px 0 0;
    cursor: pointer;
    user-select: none;
}
.wel-tips {
    width: 800px;
    line-height: 50px;
    margin: 16px 0 16px 50px;
    padding-left: 16px;
    display: flex;
    align-items: center;
    background-color: #fff7f0;
    font-size: 13px;
    .el-icon-warning {
        margin-right: 5px;
        font-size: 16px;
        color: #faad14;
    }
}
.wel-content {
    &-label {
        width: 140px;
        padding-right: 14px;
        text-align: right;
    }
    &-info {
        width: 800px;
    }
}

.wel-dayparting {
    &-common {
        width: 620px;
        padding: 16px 0;
        box-sizing: border-box;
        border-radius: 3px;
    }
    &-tips {
        border: 1px solid #acd7ff;
        background-color: #f7fcff;
        font-size: 12px;
        line-height: 20px;
        .el-col {
            margin-bottom: 0;
        }
    }
}
.wel-dayparting-content {
    &-item {
        display: flex;
        &-label {
            width: 140px;
            padding-right: 14px;
            text-align: right;
        }
        &-info {
            width: 720px;
            position: relative;
            &-del {
                font-size: 18px;
                position: absolute;
                right: -30px;
                bottom: 15px;
                cursor: pointer;
            }
        }
    }
    &-add {
        width: 150px;
        margin-left: 140px;
        cursor: pointer;
        color: #1890ff;
    }
}
.wel-shield {
    /deep/ .el-input {
        width: 100px;
        margin-right: 5px;
        input {
            height: 28px;
            line-height: 28px;
        }
    }
}
.code-open {
    /deep/ .el-date-editor {
        width: 180px !important;
    }
    .space-place {
        padding: 0 8px;
    }
}
.code-qrcode {
    display: flex;
    align-items: flex-end;
    &-preview {
        position: relative;
        width: 165px;
        height: 165px;
        &-outer {
            width: 100%;
            height: 100%;
        }
        &-inner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
        }
    }
    &-upload {
        margin-left: 30px;
        /deep/ &-box .el-upload {
            width: 66px;
            height: 66px;
            border: 1px dashed #d9d9d9;
            background-color: #fafafa;
            cursor: pointer;
            &:hover {
                border-color: #1890ff;
            }
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
.code-qrcode-btn {
    height: 66px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.code-group-suffix {
    padding-right: 10px;
    cursor: pointer;
}
</style>
